<!--
* @description 单位排名卡片
* @author zywu
* @date 2021/03/19 14:18:52
!-->
<template>
  <div class="primary-panel is-shadow inspect-ranklist">
    <div v-if="showHead" class="inspect-ranklist__head">单位排名</div>
    <div>
      <div
        class="inspect-ranklist__item d-flex ai-center"
        v-for="(item,i) in resultDataList"
        :key="item.id"
        @click="onClick&&onClick(item)"
      >
        <span class="inspect-ranklist__order d-flex ai-center jc-center">{{i+1}}</span>
        <div class="inspect-ranklist__content">
          <div class="unit-name">{{item.orgName}}</div>
          <div class="unit-info">任务{{item.total}}｜完成率{{Math.ceil(item.checkNum*100/(item.total||1))}}%</div>
          <van-progress
            v-if="item.checkNum>0"
            :percentage="Math.ceil(item.checkNum*100/(item.total||1))"
            stroke-width="5px"
            color="#5BD1B9"
            track-color="#fff"
            :show-pivot="false"
          />
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div v-if="showMore&&dataList.length>5" class="d-flex ai-center jc-center">
      <div class="inspect-ranklist__more" @click="onClick&&onClick()">查看更多</div>
    </div>
  </div>
</template>

<script>
// "noCheckNum":1,   //未完成数
// "total":1,      //任务总数
// "orgName":"A单位",  //单位名称
// "checkNum":0,   //完成任务数
// "checkPercent":0.5,   //完成度
// "orgId":"146"    //单位名称
// "orgLogo":"http://img.yx-ilink.com/logo.png"    //单位logo
export default {
  props: {
    showHead: {
      type: Boolean,
      default: false,
    },
    showMore: {
      type: Boolean,
      default: false,
    },
    onClick: {
      type: Function,
      default: function () {},
    },
    dataList: Array,
  },
  data() {
    return {}
  },

  components: {},

  computed: {
    resultDataList() {
      return this.showMore
        ? JSON.parse(JSON.stringify(this.dataList)).splice(0, 5)
        : this.dataList
    },
  },

  created() {},

  mounted() {},

  methods: {
    handleViewMore() {
      this.$router.push({
        name: 'InspectUnitRank',
      })
    },
  },
}
</script>
<style lang='scss'>
.inspect-ranklist {
  padding: 5px 10px 0 10px;
  &__head {
    padding: 10px 10px 0;
    font-size: 17px;
    color: #333;
    font-weight: 500;
  }
  &__item {
    position: relative;
    padding: 19px 0 19px 5px;
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
      background: #e1e1e1;
    }
    &:last-child {
      &::before {
        display: none;
      }
    }
  }
  &__order {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: rgba(75, 159, 255, 0.1);
    color: #2471ca;
  }
  &__content {
    margin: 0 15px;
    flex: 1;
  }
  .unit-name {
    font-size: 16px;
    color: #333;
  }
  .unit-info {
    margin: 4px 0 9px;
    font-size: 12px;
    color: #999;
  }
  .van-icon {
    color: #999;
  }
  &__more {
    margin: 10px 0;
    padding: 5px 10px;
    font-size: 14px;
    color: #2471ca;
  }
}
</style>